<template>
	<view class="" id="index">
		<view class="header">
			<view class="logoBox">
				<view class="leftAddress orderMap13">
					重庆市{{address}}
					<u-icon name="arrow-down-fill" color="#fff" size="8" style="margin-left: 6upx;"></u-icon>
				</view>
				<view class="centerAddress">
					同城货运
				</view>
				<view class="rightAddress">
				</view>
			</view>
			<view class="navbarBox">
				<view class="navbar" :class="{'xuan':ownerType==2?true:false}" @click="navbarMD(2)">
					企业用车
				</view>
				<view class="navbar" :class="{'xuan':ownerType==1?true:false}" @click="navbarMD(1)">
					个人用车
				</view>
			</view>
		</view>
		<view class="" style="height: 250rpx;"></view>
		<indexTop />
		<indexTwo />
		<indexThree v-if="showThree" />


		<view class="" v-if="value">
			<view class="insurance">
				<view class="insurance_flex">
					<u-checkbox-group v-model="moneys" placement="column" @change="checkboxChange">
						<u-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" :name="1" />
					</u-checkbox-group>
					<view class="insurance_tile" @click="checkboxChange">平台标准定价</view>
				</view>
				<view @click="checkboxChange">
					<view class="insurance_sizae">
						{{(value*1+order.shipperOrderDetailDto.gratuityAmount*1+order.shipperOrderDetailDto.insuranceAmount*1).toFixed(2)}}元
					</view>
					<view class="insurance_sizae1">已优惠<span style="color: #EE394B;">5</span> 元
					</view>
				</view>
			</view>
			<view class="insurance">
				<view class="insurance_flex" @click="dinjia">
					<u-checkbox-group v-model="moneys1" placement="column" @change="checkbox">
						<u-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" :name="1" />
					</u-checkbox-group>
					<view class="insurance_tile" @click="dinjia">商议定价</view>
				</view>
				<view style="display: flex;align-items: center;" @click="dinjia">
					<view style="font-size: 28rpx;color: #999999;" v-if="value1==0">去定价</view>
					<view class="" style="font-size: 28rpx;" v-else>{{value1}}元</view>
					<u-icon name="arrow-right" size="15"></u-icon>
				</view>
			</view>
		</view>




		<view class="xiaaniu_flx" v-show="!showThree">
			<view class="liji" @click="lijiyong">立即用车</view>
			<view class="yuyue" @click="pickerShow">预约用车</view>
		</view>
		<view class="liji1" style="margin-top: 20rpx;" v-show="showThree" @click="verify">确认下单</view>

		<view class="" style="height:60rpx;"></view>


		<ch-picker ref="ChPicker" position="bottom" @confirmTime='confirmTime' :columns="columns">
		</ch-picker>
		<u-popup :show="showDian" @close="showDian=false" round='20'>
			<view style="height: 600rpx;">
				<view class="popup_box">
					<view class="popup_tile">商议定价</view>
					<view class="popup_tetx">价格越高，司机应答越快</view>
				</view>
				<view class="slider">
					<u-slider v-model="value1" min="10" max="2000"></u-slider>
				</view>
				<view class="slider_flx" style="background-color: #F7F9FB;">
					<view class="" style="margin-left: 30rpx;">
						<input type="number" v-model="value1" style="height: 100rpx;font-size: 44rpx;font-weight: 600;">
					</view>
					<view class="" style="font-size: 28rpx;color: #999999;margin-right: 30rpx;">元</view>
				</view>

				<view class="cofreas" @click="shangyi">确定</view>
			</view>
		</u-popup>
		<web-view src="/static/mapHtml/distance.html" style="width: 0%;height: 0%;" v-if="showWeb"
			@message="message"></web-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import indexTop from '@/pages/index/components/indexTop.vue'
	import indexTwo from '@/pages/index/components/indexTwo.vue'
	import indexThree from '@/pages/index/components/indexThree.vue'

	export default {
		data() {
			return {
				longitude: '', //当前位置的经度
				latitude: '', //当前位置的纬度
				address: '', //地址信息
				amount: 0, //金额
				showPoup: false,
				columns: [],
				ownerType: 1,
				moneys: [1],
				moneys1: [],
				showDian: false,
				value: '',
				value1: 0,
				showThree: false,
				showWeb: false,
				waybillId: ''

			}
		},
		onLoad(e) {
			if (e.id) {
				this.waybillId = e.id
				this.showThree=true
				console.log(this.waybillId)
			}
		},


		methods: {
			...mapMutations('order', ['addressOder', 'changeOder', 'Primitive', 'setAddressList']),
			checkboxChange() {
				this.moneys1 = []
				this.moneys = [1]
			},
			shangyi(){
			this.showDian=false  
			let data = {
				pricingMethod:'0'
			}
			this.changeOder(data)
			},
			message(e) {
				let data = {
					totalDistant: e.detail.data[0].juli,
					distantAmount: (e.detail.data[0].juli * 3).toFixed(2)
				}
				this.value = data.distantAmount
				this.changeOder(data)
				this.showWeb = false
				this.setAddressList(e.detail.data[0].mood)
			},
			verify() {
				let saa = {
					pricingMethod:'1'
				}
				this.changeOder(saa)
				let data
				let that = this
				if (this.value1 > 0) {
					data = {
						totalAmount: (this.value1 * 1 + this.order.shipperOrderDetailDto.gratuityAmount * 1 + this
							.order.shipperOrderDetailDto.insuranceAmount * 1).toFixed(2)
					}
				} else {
					data = {
						totalAmount: (this.value * 1 + this.order.shipperOrderDetailDto.gratuityAmount * 1 + this.order
							.shipperOrderDetailDto.insuranceAmount * 1).toFixed(2)
					}
				}
				
				this.addressList.forEach((item,i)=>{
					if(i==this.addressList.length-1){
						this.addressList[i].addressType=0
					}
				})
			
				this.addressOder(this.addressList)
				this.changeOder(data)
				setTimeout(() => {
					that.queding()
				}, 500)
			},

			//确认修改清空之前订单
			async removeOrder() {
				let res = await this.$http.order.removeOrderWayBillById({
					waybillId: this.waybillId
				})
			},
			//确定下单
			async queding() {
				let that = this
				let data = {
					paymentType: this.cont
				}
				this.changeOder(data)
				let fromdata = JSON.parse(JSON.stringify(this.order))
				fromdata.addrlist.forEach((item, i) => {
					item.addsort = i + 1
				})
				fromdata.shipperOrderDetailDto.carTypeNeeds = JSON.stringify(fromdata.shipperOrderDetailDto
					.carTypeNeeds)
				let res = await this.$http.order.shipperConfirmOrder(fromdata)
				let id = res.data.data.waybillId
				if (res.data.code == 200) {
					uni.showToast({
						title: "下单成功",
						icon: "none"
					})
					if (this.waybillId) {
						this.removeOrder()
					}
					setTimeout(() => {
						uni.navigateTo({
							url: "/subPackages/order/awaitOrder/awaitOrder?id=" + id
						})
						uni.setStorageSync('orderMood', JSON.stringify(orderMood))
					}, 1000)
				} else {
					uni.showToast({
						title: "下单失败",
						icon: "none"
					})
				}
			},



			checkbox() {
				this.moneys1 = [1]
				this.moneys = []
			},

			dinjia() {
				this.showDian = true
				this.moneys1 = [1]
				this.moneys = []
				this.value1 = 80
			},
			navbarMD(e) {
				this.ownerType = e
				let data = {
					useCarType: e
				}
				this.changeOder(data)
			},

			lijiyong() {
				let data = {
					reservation: 0
				}
				this.changeOder(data)
				let show
				this.addressList.forEach((item, i) => {
					if (!item.address) {
						show = false
					} else {
						show = true
					}
				})
				if (!show) {
					uni.showToast({
						title: '请选择完整地址',
						icon: 'none'
					})
					return false
				}
				this.showThree = true
				
				
			},
			pickerShow() {
				let data = {
					reservation: 1
				}
				this.changeOder(data)
				this.$refs.ChPicker.show()

			},
			confirmTime(e) {
				let data = {
					shipmentTime: e
				}
				this.$refs.ChPicker.hide()
				this.changeOder(data)
				let show
				this.addressList.forEach((item, i) => {
					if (!item.address) {
						show = false
					} else {
						show = true
					}
				})
				if (!show) {
					uni.showToast({
						title: '请选择完整地址',
						icon: 'none'
					})
					return false
				}
				this.showThree = true
			},
			//获取当前地址经纬度
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
				})
			},
		},
		onHide() {

		},
		onShow() {
			// this.Primitive()
			uni.showLoading({
				title: '数据加载中...'
			})
			let show
			this.addressList.forEach((item, i) => {
				if (!item.address) {
					show = false
				} else {
					show = true
				}
			})
			this.showWeb = show
			uni.setStorageSync('showWeb', this.showWeb)
			uni.setStorageSync('addressList', JSON.stringify(this.addressList))
			uni.hideLoading()

			if (uni.getStorageSync('up') == 1) {
				this.$forceUpdate()
				uni.removeStorageSync('up')
			}


		},
		computed: {
			...mapState({
				addressList: state => state.order.addressList,
				order: state => state.order.order,
			})
		},
		components: {
			indexTop,
			indexTwo,
			indexThree
		}
	}
</script>

<style lang="scss" scoped>
	$borderR: 12upx;
	$bg: #F7F9FB;
	$upx20: 20upx;

	.xiaaniu_flx {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 50rpx;
	}

	.liji {
		width: 420rpx;
		height: 104rpx;
		text-align: center;
		line-height: 104rpx;
		background-color: #02A7F0;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.liji1 {
		width: 630rpx;
		height: 104rpx;
		text-align: center;
		line-height: 104rpx;
		background-color: #02A7F0;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
		margin: 0 auto;
	}

	.yuyue {
		width: 190rpx;
		height: 104rpx;
		text-align: center;
		line-height: 104rpx;
		background-color: #5998A6;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.slider {
		margin-top: 80rpx;
		margin-left: 30rpx;
	}

	.slider_flx {
		width: 85%;
		display: flex;
		justify-content: space-between;
		margin-left: 10%;
		margin-top: 20rpx;
		align-items: center;
	}

	.popup_box {
		margin-top: 50rpx;
		margin-left: 65rpx;
	}

	.popup_tile {
		font-size: 36rpx;
		font-weight: 600;
	}

	.popup_tetx {
		font-size: 24rpx;
		color: #999999;
	}

	#index .cofreas {
		width: 640rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #02A7F0;
		color: #fff;
		text-align: center;
		margin: 0 auto;
		border-radius: 10rpx;
		margin-top: 80rpx;
	}

	#index .contentBox {
		background-color: $bg;
		width: 100%;
		height: calc(100vh - var(--window-bottom));
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		overflow: scroll;
	}

	#index .header {
		background-color: #00A0E9;
		color: #fff;
		height: 250upx;
		width: 100%;
		position: fixed;
		top: 0%;

		z-index: 999;
		box-sizing: border-box;
		padding: 0upx 40upx;
		padding-top: 50rpx;

		.logoBox {
			display: flex;
			justify-content: space-between;
			color: #FFFFFF;
			align-items: center;
			box-sizing: border-box;
			padding: 20upx 0upx;

			.leftAddress {
				display: flex;
				font-size: 24upx;
				letter-spacing: 2upx;
				width: 180upx;
				box-sizing: border-box;
				padding-left: 34upx;
			}

			.centerAddress {
				font-weight: 800;
				font-size: 48upx;
				font-style: italic;
			}

			.rightAddress {
				width: 180upx;
			}
		}

		.navbarBox {
			margin-top: 14upx;
			display: flex;
			font-size: 32upx;

			.navbar {
				width: 180upx;
				box-sizing: border-box;
				padding: 12upx 0upx;
				text-align: center;
				margin-right: 20upx;
			}

			.xuan {
				box-sizing: border-box;
				border-radius: 40upx;
				border: 2upx solid #fff;
				background-color: #00affa;
			}
		}
	}

	#index .insurance {
		border-radius: $borderR;
		width: 95%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20upx 20upx 20upx 20upx;
		margin-left: 20upx;
		font-weight: 600;
		margin-left: 2.5%;
		display: flex;
		justify-content: space-between;
	}

	#index .u-slot-value {
		font-weight: 100;
		font-size: 26upx;
	}

	#index .colorblack {
		color: black;
		font-weight: 600;
	}

	#index .insurance_flex {
		display: flex;
		align-items: center;
	}

	#index .insurance_tile {
		margin-top: -18rpx;
		font-size: 30rpx;
	}

	#index .insurance_sizae {
		font-size: 44rpx;
		font-weight: 600;
	}

	#index .insurance_sizae1 {
		font-size: 22rpx;
		text-align: right;
	}
</style>